﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="css/loginv2.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>boo4g智慧楼宇管理平台V1.0-用户登录</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <!--<script>if(window.top !== window.self){ window.top.location = window.location;}</script>-->
    <style>
        label.error{
            float:left;
            margin:5px 0 5px;
        }

        .field-input-wrapper{
            height:70px;
            position:relative;
        }
        .login-field-label{
            width:64px;
            height:48px;
            line-height:48px;
            padding-left:0px;
            padding-right:0px;
           position:absolute;
           left:12px;
           top:0   
         }
        .form-group{
            margin-bottom:0px;
        }
        .form-control{
            width:100%;
            height:48px;
            border-radius:30px;
            padding-left:100px;
            background-color:#ffffff;
            font-size: 16px;
        }
        
    </style>
</head>
<body style="background: url('img/loginbg.jpg'); ">

    <div  class="middle-box text-center loginscreen  animated fadeInDown"  id="rrapp" v-cloak>
        <div style="margin-top:30%;font-size:16px;width:300px;">
            <div>
                <h1 class="logo-name" style="width: 118px; height: 110px;margin:0 auto;    background-image: url('img/login/LOGO.png'); background-size: 100% 100%; "></h1>
            </div>
            <h3 style="margin-bottom: 60px;margin-top: 20px;color: #a5b1c7;">boo4g管理平台</h3>
                <div class="form-group field-input-wrapper">
                    <label class="col-sm-3 control-label login-field-label" >用户名</label>
                    <input type="text" class="form-control" placeholder="用户名"  v-model="username"  maxlength="11">
                </div>
                <div class="form-group field-input-wrapper">
                    <label class="col-sm-3 control-label login-field-label">密&nbsp;&nbsp;码</label>
                    <input type="password" class="form-control" v-model="password" placeholder="密码">
                </div>
                <div class="form-group field-input-wrapper">
                    <label class="col-sm-3 control-label login-field-label">验证码</label>
                    <input type="text" class="form-control" v-model="captcha" @keyup.enter="login" placeholder="验证码">
                </div>
                <div class="form-group field-input-wrapper">
                    <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
                    &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode">点击刷新</a>
                </div>
                <button type="button" class="login-btn" style="display:block;width:100%;height: 48px; background-image: url('img/login/btn-login.png');background-size:100% 100%;background-color:#374654;border-radius:30px;"
                        @click="login"></button>
                <!--<p class="text-muted text-center">
                    <a href="login.html#"><small>忘记密码了？</small></a> | <a href="register.html">注册一个新账号</a>
                </p>-->
        </div>
    </div>
    <!-- 第三方插件 -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="js/contabs.js"></script>
    <script src="libs/vue.min.js"></script>
    <script src="libs/app.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/plugins/layer/layer.min.js"></script>
    <!-- 自定义公共js -->
    <script src="js/common.js"></script>


    <script>
        var vm = new Vue({
            el:'#rrapp',
            data:{
                username: '',
                password: '',
                captcha: '',
                error: false,
                errorMsg: '',
                src: 'captcha.jpg'
            },
            beforeCreate: function(){
                if(self != top){
                    top.location.href = self.location.href;
                }
            },
            methods: {
                refreshCode: function(){
                    this.src = "captcha.jpg?t=" + $.now();
                },
                login: function () {
                    var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
                    $.ajax({
                        type: "POST",
                        url: baseURL + "sys/login",
                        data: data,
                        dataType: "json",
                        success: function(r){
                            if(r.code == 0){//登录成功
                                localStorage.setItem("token", r.token);
                                parent.location.href ='index.html';
                            }else{
                                //vm.error = true;
                                //vm.errorMsg = r.msg;
                                alert(r.msg);
                            }
                        }
                    });
                }
            }
        });
    </script>
</body>

</html>

